<template>
  <view>
    <map
      id="myMap"
      style="width: 100%; height: 80vh"
      :latitude="center.latitude"
      :longitude="center.longitude"
      :markers="markers"
      :polyline="polylines"
      show-location
    ></map>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 地图中心点
const center = ref({
  latitude: 39.909,
  longitude: 116.39742,
})

// 标记点数组
const markers = ref([
  {
    id: 1,
    latitude: 39.909,
    longitude: 116.39742,
    title: '起点',
    iconPath: '/static/location.png',
    width: 30,
    height: 30,
  },
  {
    id: 2,
    latitude: 39.919,
    longitude: 116.40742,
    title: '终点',
    iconPath: '/static/location.png',
    width: 30,
    height: 30,
  },
])

// 轨迹线
const polylines = ref([
  {
    points: [
      { latitude: 39.909, longitude: 116.39742 },
      { latitude: 39.915, longitude: 116.40242 },
      { latitude: 39.919, longitude: 116.40742 },
    ],
    color: '#FF0000',
    width: 6,
    dottedLine: false,
  },
])
</script>
